"use client"

import * as motion from "motion/react-client"
import { useEffect, useState } from "react"

export default function WinOrder() {
    const [order, setOrder] = useState(initialOrder)

    useEffect(() => {
        const timeout = setTimeout(() => setOrder(shuffle(order)), 1000)
        return () => clearTimeout(timeout)
    }, [order])

    return (
        <ul style={{
            listStyle: "none",
            padding: 0,
            margin: 0,
            position: "relative",
            display: "flex",
            flexWrap: "wrap",
            gap: 5,
            width: 300,
            flexDirection: "row",
            justifyContent: "center",
            alignItems: "center",
        }}>
            {order.map((backgroundColor) => (
                <motion.li
                    key={backgroundColor}
                    layout
                    transition={{
                        type: "spring",
                        damping: 10,
                        stiffness: 200,
                    }}
                    style={{ ...{
                        width: 50,
                        height: 50,
                        padding: 0,
                        margin: 0,
                        borderRadius: "10px",
                    }, backgroundColor }}
                />
            ))}
        </ul>
    )
}

const initialOrder = [
    "#ff0088",
    "#dd00ee",
    "#9911ff",
    "#0d63f8",
]

/**
 * ==============   Utils   ================
 */
function shuffle([...array]) {
    return array.sort(() => Math.random() - 0.5)
}

